<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home/statistics' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      <el-breadcrumb-item>评论列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="queryInfo.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="queryInfo.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="queryInfo.phone" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchUser">查询</el-button>
      </el-form-item>
    </el-form>
    <el-main>
      <el-table :data="commentsList" border  v-loading="loading" >
        <el-table-column align="center" type="index" label="#" width="60">
        </el-table-column>
        <el-table-column align="center" prop="goods_id" label="商品ID" width="100">
        </el-table-column>
        <el-table-column align="center" prop="content" label="评价内容" width="140">
        </el-table-column>
        <el-table-column align="center" prop="rate" label="评论类型" width="180">
        </el-table-column>
        <el-table-column align="center" prop="star" label="评论星级" width="140">
        </el-table-column>

        <el-table-column align="center" prop="pics" label="图集" width="200">
        </el-table-column>
        <el-table-column align="center" prop="updated_at" label="更新时间" width="180">
        </el-table-column>

      </el-table>

      <el-pagination
          style="margin-top: 20px"
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="pagination.total">
      </el-pagination>

    </el-main>
  </div>
</template>

<script>
import {getComment} from "../../api/comments";

export default {
  name: "Statistics",
  data(){
    return{
      commentsList:[],
      pagination:{},
      queryInfo:{
        current:1,
        goods_title:'',
        rate:null,
      },
      loading:false,
    }
  },
  mounted() {
    this.getCommentData()
  },
  methods:{
    async getCommentData(){
      this.loading = true
      const res = await  getComment(this.queryInfo)
      if(res && res.status === 200){
        this.loading = false
        this.commentsList = res.data.data
        this.pagination = res.data.meta.pagination
      }
      console.log(res);
    },
    handleCurrentChange(val){
      console.log(val);
      this.queryInfo.pageNum = val
      this.getUserListData()
    },
    changeSwitch(userInfo){
      // console.log(value);
      const userId = userInfo.id
      console.log(userId);
    },
    //查询用户
    searchUser(){
      this.getUserListData()
    }
  }
}
</script>

<style scoped lang="css">
.el-breadcrumb{
  /*margin-left: 20px;*/
  padding:0 0 0 20px;
}
.el-form{
  padding:0 0 0 20px;
  margin-top: 20px;
}
</style>